<template>
  <div class="app-container" style="height:100%">
    <!--  按钮  -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          >新增
        </el-button>
      </el-col>
    </el-row>
    <!--  表格 -->
    <hk-table
      :loading="loading"
      :tableData="appList"
      :showIndex="true"
      :tableColumns="tableLabel"
      :total="total"
      :operate="true"
      :showPag="false"
      :table-height="80"
      :commonFixed="false">
      <template #status="scope">
        <el-switch
          v-model="scope.row.status"
          :active-value="0"
          :inactive-value="-1"
          @change="handleStatusChange(scope.row)"></el-switch>
      </template>

      <template #operate="scope">
        <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改 </el-button>
        <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除 </el-button>
      </template>
    </hk-table>

    <!-- 添加或修改角色配置对话框 -->
    <add-dialog ref="addDialogRef" :title="title" @submitForm="submitForm" />
  </div>
</template>

<script>
import { listApp, deleteApp, changeAppStatus } from '@/api/system/app'
import addDialog from './form'
import HkTable from '@/components/HKTable/index'

export default {
  name: 'App',
  components: { addDialog, HkTable },
  data() {
    return {
      total: 0,
      // 弹出框的值标题
      title: '',
      loading: false,
      appList: [],
      tableLabel: [
        { label: '应用名称', param: 'appName' },
        { label: '应用标识', param: 'appCode'},
        { label: '状态', param: 'status', type: 'slot' },
        { label: '创建时间', param: 'createDate' }
      ],
    }
  },
  created() {
    this.getList()
  },
  methods: {
    /** 查询列表 */
    getList() {
      listApp().then((res) => {
        this.appList = res
      })
    },
    // 状态修改
    handleStatusChange(row) {
      let text = row.status == 0 ? '启用' : '停用'
      this.$modal
        .confirm('确认要' + text + '[' + row.appName + ']应用吗？')
        .then(function () {
          return changeAppStatus(row.id, row.status)
        })
        .then(() => {
          this.$modal.msgSuccess(text + '成功')
          this.getList()
        })
        .catch(function () {
          row.status = row.status == 0 ? 1 : 0
        })
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.$refs.addDialogRef.show('')
      this.title = '添加应用'
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.$refs.addDialogRef.show(row.id)
      this.title = '修改应用'
    },
    /** 提交按钮 */
    submitForm: function (value) {
      if (value) {
        this.getList()
      }
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      this.$modal
        .confirm('确定要删除该项应用数据？')
        .then(function () {
          return deleteApp(row.id)
        })
        .then(() => {
          this.getList()
          this.$modal.msgSuccess('删除成功')
        })
        .catch(() => {})
    },
  },
}
</script>
<style lang="scss" scoped>
.app-container{
  height:100% !important;
  display:flex !important;
  flex-direction: column !important;
}
#app.dark-theme{
  .app-container{
  height:100% !important;
  display:flex;
  flex-direction: column;
}

}
::v-deep .targetTable{
  flex:1 !important;
  overflow:hidden;
}


</style>
